<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                    v-model="buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="充值时间">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="monthvalue"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用户">
                  <FilterSelect2
                    v-model="customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                 <el-form-item label="状态">
                  <el-select size="small" v-model="status" style="width: 100%;">
                    <el-option label="未完成" value="10" class="option"></el-option>
                    <el-option label="已完成" value="30" class="option"></el-option>
                    <el-option label="关闭" value="40" class="option"></el-option>
                  </el-select>
                 </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: right;margin-top: 4px;">
                <el-button class="button" size="small" @click="chongzhi">重 置</el-button>
                <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div class="butti">
          <div>充值管理</div>
          <div style="display: flex;">
            <span style="margin-right: 10px;"><el-button @click="dialogVisible=true" size="small" type="primary">
              <i style="font-size: 12px;" class="iconfont icon-chongzhi"></i> 充值</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
      </div>
      <!-- table表格 -->
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :issize="issize">
        <el-table-column
        label="状态"
        align="center">
        <template #default="{row}">
          <div class="status">
            <div v-if="row.status==30" class="success"></div>
            <div v-else class="woring"></div>
            <div>{{ row.rechargeStatusName }}</div>
          </div>
        </template>
        </el-table-column>
        <el-table-column
        label="操作"
        width="100"
        align="center">
        <template #default="{row}">
          <el-tooltip class="item" effect="dark" content="浏览" placement="top">
            <i @click="look(row)" class="el-icon-view" style="color:#1a90fe ; cursor: pointer;"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      </TableColumn>
      </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
        </el-pagination>
      </div>
    </div>
    <!-- 充值弹窗 -->
    <div class="dialog">
    <el-dialog
      title="电费充值"
      ref="dialog"
      :visible.sync="dialogVisible"
      width="40%">
      <div>
        <div class="headerbox">
          <span class="text">电费充值</span>
          <span><i @click="disquxiao" class="el-icon-close"></i> </span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="110px" :disabled="flag">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属建筑群" prop="buildingId">
                <FilterSelect2
                    v-model="ruleForm.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="chengjianzhuqun"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
               </el-form-item>
            </el-col>
          </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户" prop="customerId">
              <FilterSelect2
                    v-model="ruleForm.customerId"
                    :optionlist="diayonghulist"
                    @updateModelValue="changeyonghu"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
        </el-row>
         <template>
          <div class="diatext">
            <div class="text bgc">用户编号</div>
            <div class="text">{{ entity.customerNo }}</div>
            <div class="text bgc">用户余额</div>
            <div class="text">{{ entity.balance }}</div>
          </div>
         </template>
         <template>
          <div style="margin-bottom: 10px;">
            <el-table
              :data="tableDatas"
              border
              :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
              style="width: 100%">
              <el-table-column
                prop="roomName"
                label="房间名称">
              </el-table-column>
              <el-table-column
                prop="meterName"
                label="电表名称">
              </el-table-column>
              <el-table-column
                prop="Indications"
                label="电表示数">
              </el-table-column>
            </el-table>
          </div>
         </template>
         <el-row>
          <el-col :span="12">
            <el-form-item label="充值金额" prop="amount">
              <el-input v-model="ruleForm.amount" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线下缴费方式" prop="offLineType">
                <el-select v-model="ruleForm.offLineType" placeholder="缴费方式" size="small">
                  <el-option v-for="(item,index) in xianxialist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
            <el-form-item label="备注" >
              <el-input v-model="ruleForm.remark" size="small"></el-input>
            </el-form-item>
           </el-col>
           <el-col :span="12" v-if="ruleForm.id">
            <el-form-item label="缴费方式" prop="payType">
                <el-select v-model="ruleForm.payType" placeholder="缴费方式" size="small">
                  <el-option v-for="(item,index) in tuikuanlist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
         </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="disquxiao">{{ flag?'关闭':'取消' }}</el-button>
        <el-button v-show="!flag" type="primary" size="small" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { getzidianxialaapi } from '@/api/guidelines'
import { gettablelistapi } from '@/api/prwpaid/user-manage/OpenAaccount'
import { gettablelistapis, getmeterlistapi, postaddlistapi } from '@/api/prwpaid/cost-management/Recharge'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data () {
    return {
      status: '',
      yonghulist: [],
      tableDatas: [],
      dialogVisible: false,
      monthvalue: ['', ''],
      buildingId: '',
      customerId: '',
      issize: 'medium',
      qiyelist: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '80' },
        { label: '建筑群名称', prop: 'buildingName', width: '200' },
        { label: '流水编号', prop: 'serialNumber', width: '150' },
        { label: '用户名称', prop: 'customerName' },
        { label: '金额（元）', prop: 'amount', center: 'right' },
        { label: '缴费方式', prop: 'payTypeName' },
        { label: '累计电费充值', prop: 'accumulatedAmount', center: 'right', width: '110' },
        { label: '充值时间', prop: 'operationTime', center: 'center', width: '160' },
        { label: '备注', prop: 'remark', width: '250' }
      ],
      ruleForm: {},
      rules: {
        buildingId: [
          { required: true, message: '请选择建筑群', trigger: 'blur' }
        ],
        customerId: [
          { required: true, message: '请选择用户', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入充值金额', trigger: 'blur' }
        ],
        offLineType: [
          { required: true, message: '请选择缴费方式', trigger: 'blur' }
        ]
      },
      pageobj: {
        pageNo: 0,
        pageSize: 20
      },
      totalCount: '',
      xianxialist: [],
      diayonghulist: [],
      entity: {},
      flag: false,
      tuikuanlist: []
    }
  },

  async mounted () {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId)
    if (isBuildIdInArray) {
      this.buildingId = localbuildingId || ''
      this.getyonghuxialalist(this.buildingId)
    } else {
      this.buildingId = ''
    }
    this.gettablelist()
  },

  methods: {
    // 企业下拉
    changeqiye (val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist (val) {
      const ress = await gettablelistapi({
        pageNo: 0,
        pageSize: 500,
        startDate: '',
        endDate: '',
        state: '20',
        buildingId: val,
        customerType: ''
      })
      this.yonghulist = ress.data.list
    },
    // 确认新增
    async onsubmit () {
      await this.$refs.ruleForm.validate()
      await postaddlistapi({ ...this.ruleForm, payType: 'OFFLINE' })
      this.gettablelist()
      this.disquxiao()
    },
    // 弹窗取消
    disquxiao () {
      this.flag = false
      this.entity = {}
      this.ruleForm = {}
      this.tableDatas = []
      this.dialogVisible = false
      this.$refs.ruleForm.resetFields()
    },
    // 查看
    async look (row) {
      this.flag = true
      this.dialogVisible = true
      this.ruleForm = { ...row }
      await this.chengjianzhuqun(row.buildingId)
      this.ruleForm.customerId = +row.customerId
      this.changeyonghu(row.customerId)
    },
    // 获取表格数据
    async gettablelist () {
      this.$refs.tabledata.loading = true
      const { data: { list, totalCount } } = await gettablelistapis({
        buildingId: this.buildingId,
        customerId: this.customerId,
        status: this.status,
        pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize,
        startDate: this.monthvalue[0],
        endDate: this.monthvalue[1]
      })
      this.tableData = list
      this.totalCount = totalCount
      this.$refs.tabledata.loading = false
    },
    // 建筑群下拉
    async chengjianzhuqun (val) {
      const ress = await gettablelistapi({
        pageNo: 0,
        pageSize: 500,
        startDate: '',
        endDate: '',
        state: '20',
        buildingId: val,
        customerType: ''
      })
      this.ruleForm.customerId = ''
      this.diayonghulist = ress.data.list
    },
    // 用户下拉
    async changeyonghu (val) {
      const { data: { entity } } = await getmeterlistapi({ customerId: val })
      this.entity = entity
      this.tableDatas = entity.meterReadInfo
    },
    // 调节表格密度
    command (val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 重置
    chongzhi () {
      localStorage.removeItem('buildingId')
      this.status = ''
      this.buildingId = ''
      this.customerId = ''
      this.monthvalue = ['', '']
      this.gettablelist()
    },
    // 导出
    daochu () {
      exportexcel('mbm-microservice-biz/mbm/cost/recharge/exportExcel', {
        buildingId: this.buildingId,
        customerId: this.customerId,
        startDate: this.monthvalue[0],
        endDate: this.monthvalue[1]
      }, '电费充值')
    },
    // 刷新列表
    shuaxin () {
      this.gettablelist()
      this.$message.success('数据刷新成功')
    }
  },
  watch: {
    async dialogVisible (val) {
      if (val) {
        // 获取线下缴费方式
        const xianxia = await getzidianxialaapi({ dictType: 'MBM_OFFLINE_PAYTYPE' })
        this.xianxialist = xianxia.data.list
        // 获取退款方式
        const tuikuan = await getzidianxialaapi({ dictType: 'MBM_RECHARGE_CHANNEL' })
        this.tuikuanlist = tuikuan.data.list
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .butti{
      display: flex;
      justify-content: space-between;
      }
      .table{
        height: 90%;
        margin-top: 10px;
        .status{
          display: flex;
          align-items: center;
          justify-content: center;
          .success{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #13ce66;
            margin-right: 10px;
          }
          .woring{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
            margin-right: 10px;
          }
        }
      }
  }
  .dialog{
    .headerbox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .text{
        font-size: 18px;
        color: rgb(48, 49, 51);;
      }
      i{
        cursor: pointer;
      }
    }
    .diatext{
      margin-bottom: 10px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      .text{
        width: 25%;
        text-align: center;
        padding: 10px 0;
        border-left: 1px solid #ccc;
      }
      .bgc{
        background-color: #f1f1f1;
      }
    }
  }
}

.fenye{
  text-align: right;
}
::v-deep .el-row{
  margin-bottom: 5px;
}
::v-deep .el-form-item__error{
  padding-top: 0;
  font-size: 10px;
}
::v-deep .el-dialog__header{
  display: none;
}
</style>